<script>
import { defineComponent, reactive, toRefs, onMounted, watch } from "vue";

export default defineComponent({
  name: "ConfigCheck",
  props: {
    check: {
      type: Boolean,
      default: false,
    },
    label: {
      type: String,
      default: "",
    },
    labelTrue: {
      type: String,
      default: "",
    },
    labelFalse: {
      type: String,
      default: "",
    },
    falseHasImage: {
      type: Boolean,
      default: true,
    },
  },
  setup(props, { emit }) {
    const state = reactive({
      currentCheck: false,
    });

    watch(
      () => props.check,
      (e) => {
        state.currentCheck = e;
      }
    );

    watch(
      () => state.currentCheck,
      (e) => {
        emit("change", {
          index: props.label,
          flag: e,
        });
      }
    );

    onMounted(() => {
      state.currentCheck = props.check;
    });

    const handleCheckChange = () => {
      state.currentCheck = !state.currentCheck;
    };

    return {
      ...toRefs(state),
      handleCheckChange,
    };
  },
});
</script>

<template>
  <div class="component-config-check-container" @click="handleCheckChange">
    <div
      class="check-state"
      v-if="falseHasImage"
      :class="currentCheck ? 'check-true' : 'check-false'"
    />
    <div
      class="check-state"
      v-if="!falseHasImage"
      :class="currentCheck ? 'check-true' : 'check-loop'"
    />
    <span v-if="labelFalse === '' || labelTrue === ''">{{ label }}</span>
    <span v-if="currentCheck && labelTrue !== ''">{{ labelTrue }}</span>
    <span v-if="!currentCheck && labelFalse !== ''">{{ labelFalse }}</span>
  </div>
</template>

<style lang="scss">
.component-config-check-container {
  height: 14px;
  display: flex;
  align-items: center;
  user-select: none;
  cursor: pointer;

  .check-state {
    height: 14px;
    width: 14px;
    background-size: cover;
    margin-right: 12px;

    &.check-true {
      background-image: url("../assets/components/config-check--true.png");
    }

    &.check-false {
      background-image: url("../assets/components/config-check--false.png");
    }

    &.check-loop {
      background-image: none;
      border-radius: 2px;
      border: 1px solid #a8a7a7;
    }
  }
}
</style>
